<!-- 这样样例主要是vue函数的使用 -->
<html>

<head>
    <style>
        
        
    </style>
    
</head>

<body>
    <div id="app">
       <h2>{{firstName}} {{lastName}}</h2>
       <h2>{{firstName + ' ' + lastName}}</h2>
       <h2>{{getFullName()}}</h2>
       <h2>{{fullName}}</h2>
       <h2>计算装修费用的总和：{{allCosts}}</h2>
       <h2>计算装修费用的总和：{{totalPrice}}</h2>
    </div>
    <script src="__STATIC__/plugins/vue/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            //声明数据
            data: {
               firstName:'sun',
               lastName:'danfeng',
               renovation:[{id:1,name:'阳台相关',price:20000},{id:2,name:'柜子',price:30000},{id:3,name:'床',price:20000},{id:4,name:'其他',price:15000}]
            },
            //方法
            methods:{
                getFullName:function(){
                    return this.firstName + ' ' + this.lastName;
                }
            },
            // 计算属性有缓存，如果用到的值没有发生变化，则只执行一次，性能比methods高，methods每次都会执行
            computed:{
            // 计算属性，使用的时候不用加()
                fullName:function(){
                    return this.firstName + ' ' + this.lastName;
                },
                // 简写
                allCosts:function(){
                    //result：上一次计算的结果，currentValue：当前正在操作的数组元素，0表示result的初始值
                    return this.renovation.reduce((result,currentValue) => {
                        return result + currentValue.price;
                    },0)
                },
                //完整写法
                totalPrice:{
                    //计算属性一般没有set方法，只读属性
                    // set:function(newValue){
                    //     //这里可以设置data里的值
                    // },
                    get:function(){
                        return this.renovation.reduce((result,currentValue) => {
                            return result + currentValue.price;
                        },0)
                    }
                }
            }
        })
    </script>
</body>

</html>